<html>
    <head>
        <title>IoT City Test Portal</title>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

        <script src="{{ url_for("static", filename="ws.js") }}"></script>
        
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
        <link href='{{ url_for("static", filename="style.css") }}' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <script type="text/javascript">
            var service_url="http://localhost:8000/authenticated";
            var token=localStorage.getItem('access_token');

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status != 200) {
                        return false;
                    }
                    window.location.replace("/");
                    return true;
                }
            }
            xhr.open("GET", service_url, true);
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            xhr.send();
        </script>

        <div class="sidenav">
            
        </div>

        <div body style="margin-left: 200px;">
            <ul id="login">

        </ul>

        <div id="all">
          <div id="login-box">
            <div id="login-header">
              Type your username and password to login
            </div>
            <div id="login-inputs">
              <input type="text" placeholder="Username" name="usr">
              <br />
              <input type="password" placeholder="Password" name="pword">
            </div>
            <div id="sendLogin">
              <input type="button" onclick="Login()" class="button" value="Login">
            </div>
          </div>
        </div>
        
        
        <script type="text/javascript">
            var service_url="http://localhost:8000/login";
            var accessToken="";

            function Login() {

                var un = document.getElementsByName('usr')[0].value;
                var pw = document.getElementsByName('pword')[0].value;
                
                var xhr = new XMLHttpRequest();
                data = {"username": un, "password": pw};
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        
                        if (xhr.status == 200) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            accessToken = jsonResponse.token;
                            localStorage.setItem('access_token', accessToken);
                            window.location.replace("/");
		                }
		                else {
		                    alert ("Login was unsuccessful, please check your username and password");
                            location.reload();
		                }
                    }
                }
                xhr.open("POST", service_url, true);
                xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
                xhr.send(JSON.stringify(data));
            }

        </script>
    </body>
</html>

